import React from 'react';

class ListHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {sort: []};

    this.__getSort = this.__getSort.bind(this);
    this.__sort    = this.__sort.bind(this);
  }

  render() {
    return (
      <thead>
        <tr className="header">
          {this.props.headers.map(function(header, index){
            return (<th className={header.class} key={header.data || index}>
                      {header.headerName}
                      {this.__getSort(header.sortable, header.data, index)}
                    </th>);
          }.bind(this))}
        </tr>
      </thead>
    );
  }

  /**
   * 渲染需要排序的列表头的小图标及事件处理绑定
   * @param  {Boolean} sortable 当前列是否提供排序
   * @param  {String}  key      用于记录排序状态的key
   *                            -- 需要记录对应列的排序状态为升序（1）还是降序（-1）
   * @param  {Number}  index    列索引
   * @return {Element} 排序列表头对应的小图标；当前列不提供排序则返回空
   */
  __getSort(sortable, key, index) {
    let css   = 'icons-default';
    let _sort = this.state.sort['_sort_' + key];
    if (_sort == -1) {
      css = 'icons-descend';
    } else if (_sort == 1) {
      css = 'icons-ascend';
    }
    return (sortable
         ? <i className={css} onClick={()=>{ this.__sort(key, index) }}>&gt;</i>
         : "");
  }

  /**
   * 排序事件处理函数
   * @param  {String}  key   用于记录排序状态的key
   * @param  {Number}  index 列索引
   */
  __sort(key, index) {
    let keyIndex  = '_sort_' + key;
    let _sortMode = this.state.sort[keyIndex];
    let _sorts    = [].concat(this.state.sort);
    if(_sortMode === undefined || _sortMode == 0) {
      _sorts[keyIndex] = 1;
    } else {
      _sorts[keyIndex] = - _sortMode;
    }

    this.setState({sort: _sorts});

    this.props.onSortChanged(_sorts[keyIndex] * (index + 1));
  }
};

export default ListHeader;
